
import React from 'react';
import styled from "styled-components";
import { Layout, Menu, Input } from 'antd';
import { AudioOutlined } from '@ant-design/icons';

const { Header } = Layout;
const { Search } = Input;
const CodeHeaderBox = styled(Header)`
  background:#ffffff !important;
  position: sticky;
  top: 0;
  z-index: 1;
  width: 100%; 
  display:flex;
  
  .header-menu{
    flex: 1 1 100%;
  }
  .search-all-source{
    margin:15px 0;
  }
`
const suffix = (
  <AudioOutlined
    style={{
      fontSize: 16,
      color: '#1890ff',
    }}
  />
);
const CodeHeader = (porps: any) => {
  const { items1, onClick } = porps;
  const onSearch = (value: string) => console.log(value);
  return (
    <CodeHeaderBox>
      <div className="logo" />
      <Menu
        className='header-menu'
        theme="light"
        mode="horizontal"
        defaultSelectedKeys={['主页']}
        items={items1}
        onClick={onClick}
      />
      <Search
        className='search-all-source'
        placeholder="搜索所有资源"
        enterButton="Search"
        size="large"
        suffix={suffix}
        onSearch={onSearch}
      />
    </CodeHeaderBox>
  )
}
export default CodeHeader;